<template>
  <div>
    <div class="register_con">
      <div class="l_con fl">
        <a class="reg_logo">
          <img src="../assets/images/logo02.png" alt="" />
        </a>

        <div class="reg_slogan">足不出户  ·  新鲜每一天</div>
        <div class="reg_banner"></div>
      </div>

      <div class="r_con fr">
        <div class="reg_title clearfix">
          <h1>用户注册</h1>
          <a href="/login">登录</a>
        </div>

        <div class="reg_form clearfix">
          <div>
            <ul>
              <li>
                <label>用户名:</label>
                <input v-model="user.username" @keypress="prevent" />
              </li>

              <li>
                <label>密码:</label>
                <input type="password" v-model="user.password" @keypress="prevent" />
              </li>

              <li>
                <label>确认密码:</label>
                <input type="password" v-model="repass" @keypress="prevent" />
              </li>

              <li>
                <label>手机号:</label>
                <input v-model="user.phone" @keypress="prevent" />
              </li>

              <li class="agreement">
                <input type="checkbox" :checked="isChecked" />
                <label>同意<a href="javascript:void(0)">”移民用户使用协议“</a></label>
                <span class="error_tip2" v-show="showError"></span>
              </li>

              <li class="reg_sub">
                <input type="button" value="注 册" @click="register" />
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <PageFooter />
  </div>
</template>

<script>
  import "../assets/css/reset.css";
  import "../assets/css/main.css";
  import PageFooter from "@/components/PageFooter.vue";
  import {error, postForm} from "@/assets/js/axiosUtis";

  export default {
    data() {
      return {
        isChecked: true,
        showError: false,
        repass: "",
        user: {
          username: "",
          password: "",
          phone: ""
        }
      }
    },
    methods: {
      prevent() {
        let event = window.event;

        if (event.keyCode === 32) {
          event.returnValue = false;
        }
      },
      register() {
        let regex = /^[1][3-9][0-9]{9}$/;
        let username = this.user.username;
        let password = this.user.password;
        let repass = this.repass;
        let phone = this.user.phone;
        let isChecked = this.isChecked;

        if (username.length < 1 || username.length > 10) {
          alert("请输入1-10个字符的用户名");
        } else if (password.length < 8 || password.length > 20) {
          alert("密码最少8位，最长20位");
        } else if (password !== repass) { // 检查确认密码
          alert("两次输入的密码不一致");
        } else if (!regex.test(phone)) {
          alert("你输入的手机号格式不正确");
        } else if (!isChecked) {
          this.showError = true;
        } else {
          postForm("/user/register", this.user
            , function () {
              location.href = loginPage;
            }, function (err) {
              error(err);
            }
          );
        }
      }
    },
    name: "RegisterView",
    components: {
      PageFooter
    }
  }
</script>